<!--风向标-->
<template>
  <div>
    <!-- <table class="table table-bordered">
      <thead>
        <tr>
          <th v-for="(column,cindex) in columnArr" :key="cindex" v-if="cindex!=1">{{column}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in tableData" :key="index">
          <td v-for="(column,cindex) in columnArr" :key="cindex" v-if="cindex!=1">
            <a href="javascript:void(0)" v-if="cindex==2" @click="showDetail(item)">{{item[column]}}</a>
            <span v-else>{{item[column]}}</span>
          </td>
        </tr>
      </tbody>
      <tfoot v-if="tableData.length==0">
        <tr>
          <td :colspan="columnArr.length" align="center">无数据</td>
        </tr>
      </tfoot>
    </table> -->
    <el-table ref="singleTable" :data="tableData" @row-click="rowClick" :highlight-current-row="true" max-height="500" style="width:100%;" fit border>
      <el-table-column v-for="(column,cindex) in columnArr" :key="column" :prop="column" :label="column" v-if="cindex!=1">
        <template slot-scope="scope">
          <a href="javascript:void(0)" v-if="cindex==2" @click="showDetail(scope.row)">{{scope.row[column]}}</a>
          <i v-else-if="cindex==3" :class="{'icon-arrow up':scope.row[column]>0,'icon-arrow right':scope.row[column]==0,'icon-arrow down':scope.row[column]<0}"></i>
          <span v-else>{{scope.row[column]}}</span>
        </template>
      </el-table-column>
  </el-table>
    <chartModal v-if="isShowDetail" :type="type" :moneyType="moneyType" :goodsType="goodsType" :searchKey="searchKey" :selectedItem="selectedItem" @close="isShowDetail=false"></chartModal>
  </div>
</template>
<script>
  import chartModal from './chartModal.vue'
  export default {
    name: 'billboard',
    components: {
      chartModal
    },
    props: ['tableData','type', 'moneyType', 'goodsType', 'searchKey'],
    data() {
      return {
        isShowDetail: false,
        selectedItem: null,
        size: 20,
        nowpage: 1,
      }
    },
    computed: {
      columnArr() {
        let list = []
        if (this.tableData && this.tableData.length > 0) {
          for (let i = 0; i < this.tableData.length; i++) {
            for (let index in this.tableData[i]) {
              list.push(index)
            }
            break
          }
        }
        return list
      },
      // 分页后总页面
      page() {
        if (this.tableDate && this.tableData.length > 0) {
          return parseInt(this.tableData.length / this.size)
        }
        return 1
      },
      nowListData() {
        return this.tableData.filter((item, index) => {
          return index > (this.nowpage - 1) * this.size && index < this.nowpage * this.size
        })
      }
    },
    methods: {
      rowClick(row){
          this.$refs.singleTable.setCurrentRow(row)
      },
      showDetail(item) {
        this.selectedItem = {
            agent_id: item[this.columnArr[0]],
            agent_name: item[this.columnArr[2]],
          }
        this.isShowDetail = true
      }
    }
  }

</script>
<style lang="scss" scoped>
  /* .table-content {
      overflow: auto;
      width: 100%;
      max-height: 500px;
      white-space: nowrap;
    } */
</style>